<template>
	<div class="app-container">
		<el-form label-width="auto" ref="form" :model="form" :rules="rules" v-loading="loading">
			<el-row>
				<el-col :span="10">
					<el-form-item label="字段名称" prop="aliasName">
						<span v-if="!isEdit">{{form.aliasName}}</span>
						<el-input placeholder="输入字段名称关键字" v-model="form.aliasName" v-else></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10" :offset="2 ">
					<el-form-item label="字段名称(数据库)" prop="name">
						<span v-if="!isEdit">{{form.name}}</span>
						<el-input placeholder="输入字段名称关键字" v-model="form.name" v-else></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="字段类型" prop="typeName">
						<span v-if="!isEdit">{{form.typeName}}</span>
						<el-select style="width:100%;" v-model="form.typeName" v-else @change="typeChange">
							<el-option :value="item" v-for="item of typeList" :key="item">{{item}}</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="10" :offset="2 ">
					<el-form-item label="字段类型(数据库)" prop="type">
						<span v-if="!isEdit">{{form.type}}</span>
						<el-select style="width:100%;" v-model="form.type" v-else>
							<el-option :value="item.code" v-for="item of typeList2" :key="item.code">{{item.code}}</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="16">
					<el-form-item label="字段释义">
						<span v-if="!isEdit">{{form.definition}}</span>
						<el-input v-model="form.definition" v-else></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="16">
					<el-form-item label="字段示例">
						<span v-if="!isEdit">{{form.instance}}</span>
						<el-input v-model="form.instance" v-else></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="16">
					<el-form-item label="字段规则">
						<span v-if="!isEdit">{{form.rule}}</span>
						<el-input type="textarea" v-model="form.rule" v-else></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="16">
					<el-form-item label="字段备注">
						<span v-if="!isEdit">{{form.remark}}</span>
						<el-input type="textarea" v-model="form.remark" v-else></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-upload action="#" list-type="picture-card" :auto-upload="false">
						<i slot="default" class="el-icon-plus"></i>
						<div slot="file" slot-scope="{file}">
							<img
							class="el-upload-list__item-thumbnail"
							:src="file.url" alt=""
							>
							<span class="el-upload-list__item-actions">
							<span
								class="el-upload-list__item-preview"
								@click="handlePictureCardPreview(file)"
							>
								<i class="el-icon-zoom-in"></i>
							</span>
							<span
								v-if="!disabled"
								class="el-upload-list__item-delete"
								@click="handleDownload(file)"
							>
								<i class="el-icon-download"></i>
							</span>
							<span
								v-if="!disabled"
								class="el-upload-list__item-delete"
								@click="handleRemove(file)"
							>
								<i class="el-icon-delete"></i>
							</span>
							</span>
						</div>
					</el-upload>
				</el-col>
				<el-col :span="10" v-if="!isAdd">
					<el-form-item label="创建时间1">
						<span v-if="!isEdit">{{form.createTime}}</span>
						<el-input v-model="form.createTime" disabled v-else></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10" :offset="2" v-if="!isAdd">
					<el-form-item label="创建人">
						<span v-if="!isEdit">{{form.createName}}</span>
						<el-input v-model="form.createName" disabled v-else></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10" v-if="!isAdd">
					<el-form-item label="更新时间">
						<span v-if="!isEdit">{{form.updateTime}}</span>
						<el-input v-model="form.updateTime" disabled v-else></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10" :offset="2" v-if="!isAdd">
					<el-form-item label="更新人">
						<span v-if="!isEdit">{{form.updateName}}</span>
						<el-input v-model="form.updateName" disabled v-else></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<div class="footer">
				<el-button type="primary" v-if="!isEdit" @click="isEdit=true">编辑</el-button>
				<el-button type="primary" v-if="isEdit" @click="handleComfirm">确定</el-button>
				<el-button v-if="isEdit" @click="handleCancel">取消</el-button>
				<el-popconfirm title="确认删除吗？" @confirm="handleDelete" v-if="!isAdd&&!isEdit">
					<el-button type="danger" slot="reference" style="margin:0 10px;">删除</el-button>
				</el-popconfirm>
				<el-button @click="reback">返回</el-button>
			</div>
		</el-form>
	</div>
</template>

<script>
	import { editDict, getDictType, itemDict, deleteDict } from "@/api/dataManagement/standard/dict";
	export default {
		data() {
			// 字段名称(数据库)校验
			let validateName = (rule, value, callback) => {
				if (!value) {
					callback("字段名称(数据库)不能为空")
				}
				else if (/^[A-Za-z\_\d]+$/ig.test(value)) {
					callback()
				} else {
					callback("只支持数字、字母、下划线")
				}
			}
			return {
				isEdit: false,//字段编辑模式
				isAdd: false,//添加模式
				form: {},
				// 表单校验
				rules: {
					aliasName: [
						{ required: true, message: "字段名称不能为空", trigger: "blur" }
					],
					name: [
						{ required: true, validator: validateName, trigger: "blur" }
					],
					typeName: [
						{ required: true, message: "字段类型不能为空", trigger: "blur" }
					],
					type: [
						{ required: true, message: "字段类型(数据库)不能为空", trigger: "blur" }
					],
				},
				typeList: [],
				allTypeList: [],
				loading: false,
				dialogImageUrl: '',
				dialogVisible: false,
				disabled: false
			}
		},
		created() {
			this.getParams()
			this.getDictType()
		},
		computed: {
			typeList2() {
				return this.allTypeList.filter(item => item.name == this.form.typeName)
			}
		},
		methods: {
			// 获取地址栏参数
			getParams() {
				if (!this.$route.query.id) {
					this.$router.go(-1)
				} else if (this.$route.name == "Dict/addDict" && this.$route.query.id) {
					this.isAdd = true
					this.isEdit = true
				} else {
					this.isAdd = false
					this.isEdit = false
					this.getDictItem()
				}
			},
			// 获取字段类型表
			getDictType() {
				getDictType().then((res) => {
					let arr = []
					this.allTypeList = res.data
					res.data.forEach(item => {
						if (arr.indexOf(item.name) == -1) {
							arr.push(item.name)
						}
					})
					this.typeList = arr
				})
			},

			// 获取字典字段详情
			getDictItem() {
				if (!this.$route.query.itemId) {
					this.$message({
						type: 'error',
						message: '参数错误'
					})
					return false
				}
				this.loading = true
				itemDict(this.$route.query.itemId).then(res => {
					this.form = res.data
					this.loading = false
				}).catch(() => {
					this.loading = false
				})
			},
			handleComfirm() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						if (this.isAdd) {
							this.handleAdd()
						} else {
							this.handleSave()
						}
					}
				})
			},
			handleAdd() {
				let params = this.form
				params.status = 1
				params.treeId = Number(this.$route.query.id)
				if (this.loading) {
					return false
				}
				this.loading = true
				editDict(params).then(res => {
					if (res.code == 200) {
						console.log("???")
						this.$message({ message: res.msg, type: 'success' })
						this.$router.push({ path: '/DMS/standard/dict', query: { id: this.$route.query.id } })
					} else {
						this.$message.warning(res.message)
					}
					this.loading = false
				}).catch(err => {
					this.loading = false
				})
			},
			handleSave() {
				if (this.loading) {
					return false
				}
				this.loading = true
				editDict(this.form).then(res => {
					if (res.code == 200) {
						this.$message({ message: res.msg, type: 'success' })
						this.getDictItem()
						this.isEdit = false
					} else {
						this.$message.warning(res.message)
					}
					this.loading = false
				}).catch(err => {
					this.loading = false
				})

			},
			handleDelete() {
				if (!this.$route.query.itemId) {
					this.$message({
						message: '参数错误',
						type: 'error'
					})
					return false
				}
				if (this.loading) return false
				this.loading = true
				deleteDict(this.$route.query.itemId).then(res => {
					if (res.code == 200) {
						this.$message({
							message: res.msg,
							type: 'success'
						})
						let view = { ...this.$route }
						this.$store.dispatch('tagsView/delView', view).then(() => {
						})
						this.$router.push({ path: '/DMS/standard/dict', query: { id: this.$route.query.id } })
					}
					this.loading = false
				}).catch(() => { this.loading = false })
			},
			handleCancel() {
				if (this.isAdd) {
					this.$router.go(-1)
				} else {
					this.$refs.form.resetFields()
					this.getDictItem()
					this.isEdit = false
				}
			},
			reback() {
				this.$router.go(-1)
			},
			typeChange(value) {
				this.$set(this.form, 'type', '')
			},
			// 上传图片
			handleRemove(file) {
				console.log(file);
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			handleDownload(file) {
				console.log(file);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		padding: 30px 20px;
	}
	.footer {
		text-align: center;
		padding: 20px;
	}
	::v-deep.el-textarea textarea{
		font-family: Arial;
	}
</style>